<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>DOM Scripting: Web Design with JavaScript and the Document Object Model</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />
</head>
<body>

<div id="container">

<div id="header">
<a href="http://domscripting.com/"><img src="images/domscripting_small.gif" alt="DOM Scripting" /></a>
<img src="images/webdesignwiththedom.gif" alt="Web Design with JavaScript and the Document Object Model" />
</div>

<h1>>JavaScript Demo</h1>
<ol>
<li><a href="include/gallery/gallery.html"><h2>一个用JavaScript写的图片库</h2></a>
	<ul>
		<li>平稳退化:浏览器禁用javascript功能的情况下也不影响页面的正常展示。</li>
		<li>向后兼用性:老版本的浏览器也能正常展示页面。</li>
		<li>分离JavaScript:网页的行为层(JavaScript)与结构层(HTML)分离。</li>
		<li>性能考虑：减少访问DOM，合并JavaScript，压缩JavaScript。</li>
	</ul>
	
</li>
<li><h2><a href="include/example/chapter05/example.html">页面弹窗</a></h2>
	<ul>
	<li>window.open(url,name,features)方法创建新的浏览器窗口</li>
	</ul>
</li>
<li><a href="include/example/chapter07/ajax.html"><h2>AJAX</h2></a>

</li>
<li><h2>Creating markup on the fly</h2>
	<ul>
	<li><a href="chapter07/01/test.html">Test</a>: <code>document.write</code> inline</li>
	<li><a href="chapter07/02/test.html">Test</a>: <code>document.write</code> external</li>
	<li><a href="chapter07/03/test.html">Test</a>: <code>alert innerHTML</code></li>
	<li><a href="chapter07/04/test.html">Test</a>: updating <code>innerHTML</code></li>
	<li><a href="chapter07/05/test.html">Test</a>: <code>alert</code> node info</li>
	<li><a href="chapter07/06/test.html">Test</a>: <code>createElement</code></li>
	<li><a href="chapter07/07/test.html">Test</a>: <code>createTextNode</code></li>
	<li><a href="chapter07/08/test.html">Test</a>: <code>appendChild</code></li>
	<li><a href="chapter07/09/test.html">Test</a>: documentFragments</li>
	<li><a href="chapter07/10/test.html">Test</a>: documentFragments</li>
	</ul>
</li>
<li><h2>Enhancing content</h2>
	<ul>
	<li><a href="chapter08/abbreviations/explanation.html">Display abbreviations</a></li>
	<li><a href="chapter08/citations/explanation.html">Display citations</a></li>
	<li><a href="chapter08/accesskeys/explanation.html">Display access keys</a></li>
	</ul>
</li>
<li><h2>CSS-DOM</h2>
	<ul>
	<li><a href="chapter09/example.html">Example</a>: <code>alert</code> changed style info</li>
	<li><a href="chapter09/itinerary/itinerary.html">Itinerary</a>: striped table</li>
	<li><a href="chapter09/story/story.html">Story</a>: styling first paragraphs</li>
	</ul>
</li>
<li><h2>Animated Slideshow</h2>
	<ul>
	<li><a href="chapter10/test.html">Test</a>: positioning and moving</li>
	<li><a href="chapter10/message/message.html">Message</a>: moving 2 elements</li>
	<li><a href="chapter10/slideshow/list.html">Slideshow</a>: simple movement</li>
	<li><a href="chapter10/slideshow2/list.html">Slideshow</a>: smooth movement</li>
	</ul>
</li>
<li><h2>Putting it all together</h2>
	<ul>
	<li><a href="chapter11/domsters/index.html">Home page</a></li>
	<li><a href="chapter11/domsters/about.html">About</a></li>
	<li><a href="chapter11/domsters/photos.html">Photos</a></li>
	<li><a href="chapter11/domsters/live.html">Live</a></li>
	<li><a href="chapter11/domsters/contact.html">Contact</a></li>
	</ul>
</li>
<li><h2>The Future of DOM Scripting</h2></li>
</ol>

</div>

</body>
</html>
